import React, { Component } from "react";
import PropTypes from "prop-types";

class TodoMain extends Component {
  // 类型进行限制
  static propTypes = {
    todoList: PropTypes.array.isRequired, // 类型是一个数组且不允许为undefined
    changeIsCheckedById:PropTypes.func.isRequired // 类型是函数，且不允许是undefined
  };
  render() {
    return (
      <ul className="todo-main">
        {
            this.props.todoList.map(item => (
              <li key={item.id}>
                <label>
                  <input type="checkbox" checked={item.isChecked} onChange={()=>this.props.changeIsCheckedById(item.id)} />
                  <span>{item.title}</span>
                </label>
                <button className="btn btn-danger" style={{ display: "none" }}>
                  删除
                </button>
              </li>
          ))
        }
      </ul>
    );
  }
}

export default TodoMain;
